<template>
    <view>
        <view class="header">
            <form-input label="昵称" name="name" placeholder="请输入昵称" allowClear ref="handleRef" />
        </view>
        <view class="header">
            <form-input label="密码" name="password" placeholder="请输入密码" allowClear ref="handleRef" />
        </view>
        <view>
            <form-date-picker label="生日" placeholder="请选择生日日期" arrow name="birthday" data-name="birthday" onChange="handleInputChange" ref="handleRef" />
        </view>

        <view>
            <form-radio-group label="性别" name="genders" color="#4999ff" :options="radioGroupOptions" onChange="handleRadioChange" ref="handleRef" />
        </view>
        <view>
            <form-cascader-picker
                label="城市"
                arrow
                :options="city"
                name="city"
                data-name="city"
                tooltip="选择城市"
                placeholder="请输入城市"
                onChange="handleCityChange"
                ref="handleRef"
            />
        </view>
        <view class="page">
            <ant-button type="primary" onTap="submit">保存</ant-button>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

import city from '@/pages/myziliao/city.js';
export default {
    components: {
    
    },
    data() {
        return {
            city,
            toastShow: false,
            radioGroupOptions: [
                {
                    value: '男',
                    label: '男'
                },
                {
                    value: '女',
                    label: '女'
                }
            ],
            userAvatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7',
            openID: '',
            password: '',
            account: '',
            address: '',
            genders: '',
            phone: 'ss',
            email: 'sss',
            isRequesting: false // 添加一个标志
        };
    },
    onLoad() {
        this.form = new Form();
    },
    methods: {
        handleRef(ref) {
            this.form.addItem(ref);
        },

        async submit() {
            // Check if a request is already in progress
            if (this.isRequesting) {
                return;
            }
            this.setData({
                isRequesting: true
            });
            try {
                const values = await this.form.submit();
                console.log(values.genders);
                this.makeRequest(values);
            } catch (error) {
                console.log('CatchClause', error);
                console.log('CatchClause', error);
                console.error('Form submission error: ', error);
                this.setData({
                    isRequesting: false
                });
            }
        },

        makeRequest(values) {
            uni.getStorage({
                key: 'openId',
                success: (res) => {
                    const openId = res.data.openId;
                    uni.request({
                        url: 'http://localhost:5657/updateByAliUser',
                        method: 'POST',
                        data: {
                            openID: openId,
                            account: values.name,
                            password: values.password,
                            gender: values.genders
                        },
                        headers: {
                            'content-type': 'application/json'
                        },
                        dataType: 'json',
                        success: (res) => {
                            uni.alert({
                                title: '修改成功'
                            });
                            uni.switchTab({
                                url: '/pages/myPage/myPage'
                            });
                            this.setData({
                                isRequesting: false
                            });
                        },
                        fail: (error) => {
                            console.error('Request failed: ', JSON.stringify(error));
                            this.setData({
                                isRequesting: false
                            });
                        }
                    });
                },
                fail: (error) => {
                    console.error('Get storage failed: ', JSON.stringify(error));
                    this.setData({
                        isRequesting: false
                    });
                }
            });
        }
    }
};
</script>
<style>
.avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.page {
    margin: 398px -6px 14px 0px;
    border-radius: 10px;
}

</style>
